<template>
  <el-dialog
    title="推送"
    :visible.sync="dialogVisible"
    size="80%"
    custom-class="search-result-pop"
  >
    <div style="margin-bottom: 30px">
      <el-form ref="fromParams" :model="fromParams" label-width="120px">
        <!-- 推送名称 -->
        <el-form-item
          label="推送名称"
          prop="pushName"
          :rules="[
            {
              required: true,
              message: '请输入推送名称',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="fromParams.pushName"
            disabled
            type="text"
            :maxlength="30"
            placeholder="输入推送名称。2-30字"
          />
        </el-form-item>
        <!-- 推送类型 -->
        <el-form-item
          class="layout-item"
          label="推送类型"
          prop="type"
          :rules="[
            {
              required: true,
              message: '请选择推送类型',
              trigger: 'change',
            },
          ]"
        >
          <el-radio-group v-model="fromParams.type" disabled>
            <el-radio label="0">立即推送</el-radio>
            <el-radio label="1">定时-单次</el-radio>
            <el-radio label="2">定时-重复</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 定时-单次，选择日期 -->
        <el-form-item
          v-if="fromParams.type === '1'"
          label="日期"
          prop="day"
          :rules="[
            {
              required: true,
              message: '请选择日期',
              trigger: 'blur',
            },
          ]"
        >
          <el-date-picker
            v-model="fromParams.day"
            disabled
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionStop"
          />
        </el-form-item>
        <!-- 定时-单次，选择时间 -->
        <el-form-item
          v-if="fromParams.type === '1'"
          label="时间"
          prop="hours"
          :rules="[
            {
              required: true,
              message: '请选择时间',
              trigger: 'blur',
            },
          ]"
        >
          <el-time-select
            v-show="isToday"
            v-model="fromParams.hours"
            disabled
            placeholder="选择时间"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
              minTime: new Date().getHours() + ':00',
            }"
          />
          <el-time-select
            v-show="!isToday"
            v-model="fromParams.hours"
            disabled
            placeholder="选择时间"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
            }"
          />
        </el-form-item>
        <!-- 定时-重复，频率 选择每天 or 每周 -->
        <el-form-item
          v-if="fromParams.type === '2'"
          label="频率"
          prop="actionFrequency"
          :rules="[
            {
              required: true,
              message: '请选择频次',
              trigger: 'change',
            },
          ]"
        >
          <el-radio-group v-model="fromParams.actionFrequency" disabled>
            <el-radio :label="0">每天</el-radio>
            <el-radio :label="1">每周</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 定时重复，每天，选择时间 -->
        <el-form-item
          v-if="fromParams.type === '2' && fromParams.actionFrequency === 0"
          label="每天"
          prop="hours"
          :rules="[
            {
              required: true,
              message: '请选择时间',
              trigger: 'change',
            },
          ]"
        >
          <el-time-select
            v-model="fromParams.hours"
            disabled
            placeholder="选择时间"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
            }"
          />
        </el-form-item>
        <!-- 定时重复，每周，选择时间 -->
        <el-form-item
          v-if="fromParams.type === '2' && fromParams.actionFrequency === 1"
          label="每周"
          prop="actionDay"
          :rules="[
            {
              required: true,
              message: '请选择周几',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="fromParams.actionDay"
            disabled
            style="margin-right: 12px"
            placeholder="选择周几"
            clearable
          >
            <el-option
              v-for="(item, index) in weekDay"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
          <el-time-select
            v-model="fromParams.hours"
            disabled
            placeholder="选择时间"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
            }"
          />
        </el-form-item>
        <!-- 时间范围 -->
        <el-form-item
          v-if="fromParams.type === '2'"
          label="时间范围"
          prop="dateRang"
          :rules="[
            {
              required: true,
              message: '请选择时间范围',
              trigger: 'change',
            },
          ]"
        >
          <el-date-picker
            v-model="fromParams.dateRang"
            disabled
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionStop"
          />
        </el-form-item>
        <!-- 推送对象 -->
        <el-form-item
          class="layout-item"
          label="推送对象"
          prop="pushObject"
          :rules="[
            {
              required: true,
              message: '请选择推送对象',
              trigger: 'change',
            },
          ]"
        >
          <el-radio-group v-model="fromParams.pushObject" disabled>
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">企业</el-radio>
            <el-radio :label="2">学生</el-radio>
          </el-radio-group>
          <div v-if="fromParams.pushObject === 1" class="push-range-box">
            <!-- pushObjectType 推送对象类型 0 全部 1 部分 -->
            <el-radio-group v-model="fromParams.pushObjectType" disabled>
              <el-radio :label="0">全部企业</el-radio>
              <el-radio :label="1">个别企业</el-radio>
            </el-radio-group>
            <el-button
              v-if="fromParams.pushObjectType === 1"
              type="primary"
              style="margin-left: 10px"
              @click="openReview"
            >
              已选{{
                fromParams &&
                  fromParams.selectCompanyList &&
                  fromParams.selectCompanyList.length
              }}个
            </el-button>
          </div>
          <div v-if="fromParams.pushObject === 2" class="push-range-box">
            <!-- pushObjectType 推送对象类型 0 全部 1 部分 -->
            <el-radio-group v-model="fromParams.pushObjectType" disabled>
              <el-radio :label="0">全部学生</el-radio>
              <el-radio :label="1">个别学生</el-radio>
            </el-radio-group>
            <el-button
              v-if="fromParams.pushObjectType === 1"
              type="primary"
              style="margin-left: 10px"
              @click="openReview"
            >
              已选{{
                (fromParams &&
                  fromParams.selectSdudentList &&
                  fromParams.selectSdudentList.length) ||
                  0
              }}个
            </el-button>
          </div>
        </el-form-item>
        <!-- 推送模块 -->
        <el-form-item
          class="layout-item"
          label="推送模块"
          prop="pushModule"
          :rules="[
            {
              required: true,
              message: '请选择推送模块',
              trigger: 'change',
            },
          ]"
        >
          <el-radio-group v-model="fromParams.pushModule" disabled>
            <el-radio label="1">系统通知</el-radio>
            <el-radio label="2">实习招聘</el-radio>
            <!-- <el-radio label="2">实践项目</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <!-- 推送渠道 -->
        <el-form-item
          class="layout-item"
          label="推送渠道"
          prop="messageType"
          :rules="[
            {
              required: true,
              message: '请选择推送渠道',
              trigger: 'change',
            },
          ]"
        >
          <el-checkbox-group v-model="fromParams.messageType" disabled>
            <el-checkbox :label="0">站内信</el-checkbox>
            <el-checkbox :label="2">邮箱</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 是否发送短信 -->
        <el-form-item
          class="layout-item"
          label="是否发送短信"
          prop="isSms"
        >
          <el-checkbox v-model="fromParams.isSms" disabled>发送短信</el-checkbox>
        </el-form-item>
        <!-- 消息标题 -->
        <el-form-item
          class="layout-item"
          label="消息标题"
          prop="title"
          :rules="[
            {
              required: true,
              message: '请输入消息标题',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="fromParams.title"
            disabled
            :maxlength="30"
            type="text"
          />
        </el-form-item>
        <!-- 推送内容 -->
        <el-form-item
          class="layout-item"
          label="推送内容"
          prop="messageText"
          :rules="[
            {
              required: true,
              message: '请输入推送内容',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="fromParams.messageText" disabled type="textarea" />
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import moment from 'moment'
export default {
  name: 'CheckPop',
  components: {},
  data() {
    return {
      weekDay: [
        { label: '周一', value: 1 },
        { label: '周二', value: 2 },
        { label: '周三', value: 3 },
        { label: '周四', value: 4 },
        { label: '周五', value: 5 },
        { label: '周六', value: 6 },
        { label: '周天', value: 7 }
      ],
      pickerOptionStop: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      dialogVisible: false,
      today: moment().format('yyyy-MM-DD'),
      fromParams: {
        isSms: false,
        pushName: '', // 推送名称
        type: '0', // 推送类型 0 立即推送 1 定时推送-单次 2 定时推送-重复
        pushObject: 0, // 推送对象 0 全部 1 企业 2 学生
        pushObjectType: 0, // 推送对象类型 0 全部 1 部分
        messageType: [], // 推送渠道 0 站内信 1 短信 2邮箱
        pushModule: '1', // // 推送模块 1 系统通知 2 实习招聘 3 实践项目
        actionFrequency: 0, // int 0 每天 1 每周 2 每月
        actionDay: '', // int 执行日期
        actionTime: '', // int 执行时间，int 24小时
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        day: '', // 时间 天
        hours: '', // 时间 小时 （与day天拼在一起 yyyy-MM-DD HH）
        title: '', // 推送标题
        pushObjectId: [], // 推送对象id集合,json
        status: '2', // 状态 1启用 2停用
        messageText: '', // 推送内容
        selectSdudentList: [], // 选中学生列表
        selectCompanyList: [], // 选中企业列表
        dateRang: null,
        singleTime: '' // 定时单次发送消息推送，格式： yyyy-MM-DD HH:00
      },
      studentResultList: [],
      showStudentResultList: false
    }
  },
  computed: {
    isToday() {
      return this.fromParams.day && this.fromParams.day === this.today
    }
  },
  methods: {
    openReview() {
      this.$emit('openReview')
    },
    open(row) {
      this.dialogVisible = true
      const fromParams = JSON.parse(JSON.stringify(row))
      /**
       * pushObject: 0, // 推送对象 0 全部 1 企业 2 学生
       * pushObjectType: 0, // int 推送对象类型 0 全部 1 部分
       */
      fromParams.messageType = JSON.parse(fromParams.messageType)
      fromParams.type = fromParams.type + ''
      fromParams.pushModule = fromParams.pushModule + ''
      fromParams.pushObjectId = JSON.parse(fromParams.pushObjectId)
      // 如果推送渠道包含短信，要新增 isSms int类型 0 不发短信 1 发短信
      fromParams.isSms = !!(fromParams.isSms === 1)
      fromParams.messageType.map(item => {
        if (Number(item) === 1) {
          fromParams.isSms = true
        }
        return Number(item)
      })
      if (
        Number(fromParams.pushObject) === 1 &&
        Number(fromParams.pushObjectType) === 1
      ) {
        if (fromParams.pushObjectId.length) {
          fromParams.selectCompanyList = [...fromParams.pushObjectId]
        }
      } else if (
        Number(fromParams.pushObject) === 2 &&
        Number(fromParams.pushObjectType) === 1
      ) {
        if (fromParams.pushObjectId.length) {
          fromParams.selectSdudentList = [...fromParams.pushObjectId]
        }
      }
      if (Number(fromParams.type) === 1) {
        fromParams.day = fromParams.singleTime.split(' ')[0]
        fromParams.hours = fromParams.singleTime.split(' ')[1]
      }
      if (Number(fromParams.type) === 2) {
        fromParams.dateRang = [
          fromParams.startTime.split(' ')[0],
          fromParams.endTime.split(' ')[0]
        ]
        fromParams.hours = fromParams.actionTime + ':00'
      }
      for (const key in this.fromParams) {
        if (Object.hasOwnProperty.call(fromParams, key)) {
          this.fromParams[key] = fromParams[key]
        }
      }
      this.$refs.formParams && this.$refs.formParams.resetFields()
    }
  }
}
</script>

<style lang="scss">
.search-result-pop {
  .el-drawer__body {
    padding: 15px 20px;
  }
  .basic-infos {
    .title {
      padding: 3px 10px;
      border-left: 2px solid rgb(20, 165, 232);
      margin-bottom: 20px;
    }
  }
}
</style>
<style lang="scss" scoped>
.push-range-box {
  position: relative;
  .choose-student-count {
    position: absolute;
    right: 13px;
    bottom: -25px;
  }
}
</style>
